<template>
  <div class="form">
    更新
    商品名 <input type="text" v-model="createParams.name">
    价格 <input type="number" v-model="createParams.price">
    库存 <input type="number" v-model="createParams.inventory">
    <br>
    <button @click="updateSubmit">更新</button>
  </div>
</template>

<script>
import {goods} from "@/api/goods";

export default {
  data() {
    return {
      createParams: {
        id: 0,
        name: this.item.name,
        price: this.item.price,
        inventory: this.item.inventory
      },
    }
  },
  props:['item'],
  methods: {
    async updateSubmit() {
      this.updateOpen = false
      await goods.updateGoods(this.createParams.id, this.createParams)
      this.$forceUpdate();
      this.createParams = {}
    },
    async submit() {
      this.open = false
      await goods.createGoods(this.createParams)
      this.$forceUpdate();
      this.createParams = {}
    },
    add() {
      this.open = true
    },
    update(item) {
      this.updateOpen = true
      this.createParams.name = item.name
      this.createParams.price = item.price
      this.createParams.inventory = item.inventory
      this.createParams.id = this.data.indexOf(item)
    },
    async del(item) {
      console.log(item)
      goods.delGoods(this.data.indexOf(item))
      this.$forceUpdate();
    }
  },
  async created() {
    this.data = await goods.getGoods()
    this.$forceUpdate();
  },
  async updated() {
    this.data = await goods.getGoods()
  }

}

</script>


<style scoped>
.form {
  display: flex;
  flex-direction: column;

  box-shadow: 5px 5px black;
  border-radius: 20px;
  position: fixed;
  width: 400px;
  height: 220px;
  transition: width 10s linear 2s;
  background: rgba(89, 87, 87, 0.9);
  color: white;
  padding: 20px;
}
</style>
